<template>
    <mu-card style="border-radius: 8px;
                    box-shadow: none;
                    background-color: transparent;
                    margin-bottom: 18px"
             v-on:click="$emit('dItemClick')">
        <mu-card-media>
            <div v-show="src==null"
                 :style="style"
                 :color="color">
            </div>
            <img style="border-radius: 8px;
                        height: 28vh"
                 :src="src"
                 v-show="src!=null">
            <div class="work-item-content"
                 v-text="subStringWords(work_content,60)"
                 :align="text_center">
            </div>
            <div class="bottom-menu-audio">
                <i class="mu-icon audio-icon material-icons" style="user-select: none; color: white;"
                   v-if="time_info!=null">play_circle_outline</i>
                <span class="time-info" v-text="time_info"
                      v-if="time_info!=null"></span>
            </div>
        </mu-card-media>

        <div class="mu-card-title-container"
             style="padding: 4px">
            <div class="mu-card-title"
                 v-text="subStringWords(title,30)"
                 :align="text_center">
            </div>
            <div class="mu-card-sub-title">
                <i class="mu-icon  material-icons my-icon"
                   style="user-select: none;"
                   v-if="thumb!=null">
                    thumb_up_alt
                </i>
                <span class="thumb-count"
                      v-if="thumb!=null"
                      v-text="thumb">
                </span>
                <i class="mu-icon  material-icons my-icon eye"
                   style="user-select: none;"
                   v-if="view!=null">
                    headset
                </i>
                <span class="view-count"
                      v-if="view!=null"
                      v-text="view">
                </span>
                <i class="mu-icon  material-icons my-icon poll"
                   style="user-select: none;"
                   v-if="rank!=null">
                    poll
                </i>
                <span class="poll-count"
                      v-if="rank!=null"
                      v-text="rank">
                </span>
                <i class="mu-icon material-icons my-icon my-icon-upload"
                   style="user-select: none;"
                   v-if="upload!=null">
                    backup
                </i>
                <span class="upload-count"
                      v-if="upload!=null"
                      v-text="upload.substring(5,upload.length-3)">
                </span>

            </div>
        </div>
    </mu-card>
</template>

<script>
    export default {
        name: "DeclaimerItem",
        props: {
            src: String, //image's source,not required
            title: String, // the title for your item
            work_content: String, // content will show in the item
            thumb: String, // the sum for the thumb
            view: String, // the sum for the hear
            time_info: String, //information for the mp3 length
            color: String,
            text_center: String,
            rank: [String, Number],
            upload: String
        },
        data() {
            return {
                style: "border-radius: 8px;width: 100%;height: 28vh;"
            }
        },
        created() {
            this.style += "background-color:" + (this.color == null ? this.randomColor() : this.color)
        },
        methods: {
            /**
             * this is a function use to generate a random color
             * @return {string}
             */
            randomColor() {
                let r = Math.floor(Math.random() * 220)
                let g = Math.floor(Math.random() * 220)
                let b = Math.floor(Math.random() * 220)
                let rgba = 'rgba(' + r.toString() + ',' + g.toString() + ',' + b.toString() + ',1)'
                return rgba
            },

            /**
             * this function use to sub words not longer than the length which you define
             * @param words
             * @param len
             * @return {string}
             */
            subStringWords(words, len) {
                words=words.replace(/<[^>]+>/g,' ')
                if (words.hasOwnProperty('length')) {
                    let end = words.length > len ? len : words.length
                    let n_title = words.substring(0, end)
                    if (words.length > len) {
                        n_title += "..."
                    }
                    return n_title

                }
                return words
            }
        }
    }
</script>

<style lang="stylus">
    .mu-card-title
        font-size 18px !important
        padding-top 8px
        font-weight bold !important
        line-height 20px !important

    .my-icon
        font-size: 18px
        line-height: 2
        color rgba(0, 0, 0, 0.25)

    .thumb-count
        position relative
        top -3px
        right 70px

    .eye
        position relative
        right 62px

    .poll
        position relative
        right 54px

    .poll-count
        position relative
        top -3px
        right 53px

    .view-count
        position relative
        top -3px
        right 60px

    .work-item-content
        position: absolute;
        display: block
        top: 2vh
        padding-left 2vh
        padding-right 2vh
        color white
        font-size 17px

    .bottom-menu-audio
        position: absolute
        display block
        width 100%
        bottom: 0vh
        padding 2vh


    .time-info
        position relative
        padding-left 2vh
        padding-right 2vh
        float right !important
        background-color rgba(0, 0, 0, 0.3)
        color white
        border-radius 10px

    .audio-icon
        position relative
        float left !important

    .my-icon-upload
        position relative
        right 44px

    .upload-count
        position relative
        top -3px
        right 42px

    @media screen and (max-width: 320px)
        .mu-card-sub-title
            font-size 12px !important

        .work-item-content
            font-size: 14px !important

    @media screen and (min-width: 700px)
        .work-item-content
            font-size: 30px !important

        .mu-card-title
            padding-top 8px
            font-size 30px !important
            font-weight bold !important
            line-height 20px !important


</style>